<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-02-17 10:16:11
 * @LastEditTime: 2024-06-01 12:49:21
 * @FilePath: \env-manager-pc\src\views\assets\statistics\detail.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import { useInitForm } from './pageHelper'
import { ModelType } from '@/types/common'
import type { ModelOpen } from '@/types/page'
import assetsApi from '@/api/modules/assets'

const dialogVisible = ref(false)
const tempData = ref<any>({})
const loading = ref(false)

const { formData, initForm } = useInitForm()
const modelType = ref(ModelType.add)

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    tempData.value = options.data
  }
  dialogVisible.value = true
  getDetail()
}

const activities = ref<any>([])
const orderId = computed(() => {
  return tempData.value.OrderFormObjID || tempData.value.OrderFormObiID || tempData.value.objID
})

async function getDetail() {
  try {
    loading.value = true
    const res = await assetsApi.GetOrderForms({
      objFilter: {
        Type: 'DIM.GYHR.OrderFormFilters.GUIDFilter',
        Value: [orderId.value],
      },
      objType: 'DIM.FilterCollection',
      pageSize: 0,
      pageNum: 0,
    })
    formData.value = res.Objs[0]
    const resChanges = await assetsApi.GetAssetChanges({ assetObjIDs: [tempData.value.AssetObjID] })
    activities.value = resChanges[tempData.value.AssetObjID] || []
    loading.value = false
  }
  catch (e) {
    loading.value = false
  }
}

function close() {
  dialogVisible.value = false
  initForm()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="订单详情"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div v-loading="loading">
      <el-descriptions title="详情">
        <el-descriptions-item label="订单号：">
          {{ formData.OrderFormCode }}
        </el-descriptions-item>
        <el-descriptions-item label="生产厂家：">
          {{ formData.AssetFactoryName }}
        </el-descriptions-item>
        <el-descriptions-item label="订单时间：">
          {{ formData.PlaceDate ? dayjs(formData.PlaceDate).format('YYYY-MM-DD') : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="约定发货时间：">
          {{ formData.StipulateDate ? dayjs(formData.StipulateDate).format('YYYY-MM-DD') : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品名称：">
          {{ formData.AssetModelClassifyName }}
        </el-descriptions-item>
        <el-descriptions-item label="型号：">
          {{ formData.AssetModelName }}
        </el-descriptions-item>
        <el-descriptions-item label="设备编码：">
          {{ tempData.AssetCode }}
        </el-descriptions-item>
        <el-descriptions-item label="资产状态：">
          {{ tempData.StateName }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <el-timeline class="timeline">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          class="lineitem"
          hide-timestamp
          type="primary"
          hollow
        >
          <div class="text-left">
            <div v-if="activity.StateName" class="mb-5px">
              <span>{{ activity.StateName }}:</span><span>{{ activity.ChangeTime }}</span>
            </div>
            <div v-if="activity.ObjName" class="mb-5px">
              <span>资产名称:</span><span>{{ activity.ObjName }}</span>
            </div>
            <div v-if="activity.AccountName" class="mb-5px">
              <span>操作人:</span><span>{{ activity.AccountName }}</span>
            </div>
            <div v-if="activity.Remark">
              <span>备注:</span><span>{{ activity.Remark }}</span>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.timeline {
  display: flex;
  width: 95%;
  margin: 40px auto;

  .lineitem {
    transform: translateX(50%);
    width: 25%;
  }
}

:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 30px;
  // position: absolute;
  top: 20px;
  transform: translateX(-25%);
  text-align: center;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
// .active {
//   :deep(.el-timeline-item__node) {
//     background-color: $login_word;
//   }
//   :deep(.el-timeline-item__tail) {
//     border-color: $login_word;
//   }
// }
// // 有active样式的下一个li
// .active + li {
//   :deep(.el-timeline-item__node) {
//     background-color: $login_word;
//   }
// }
</style>
